<template>
    <div class="videos" >
        <div v-for="(key,item) in videoArr" class="vv">
          <div class="pp">
            <video class="video-play video-js vjs-default-skin vjs-big-play-centered" @click="show" >
              <source
                :src=videoArr[item]
                type="video/mp4"
              >
            </video>
            <span class="play"  @click="plays(item)"><img src="../../img/playw.png" alt=""></span>
          </div>

          <div class="video-bottom">
            <span class="s1">

        </span>
            <span class="name">{{uid[item]}}</span>
            <span class="s2 item">
          <img src="../../img/video3.png" alt="">
          {{playNum[item]}}
        </span>
            <span class="s3 item">
      <img src="../../img/video4.png" alt="">
 {{plun[item]}}
        </span>
            <span class="s4">
          <van-icon name="ellipsis" />
        </span>
          </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "videos",
      data(){
          return{
            videoArr:['https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/376a6c49140103926594146305/v.f30.mp4?dockingId=52247acb-d0e8-49dc-9450-7c623d9d7e8b&storageSource=3','https://jdvod.300hu.com/4c1f7a6atransbjngwcloud1oss/2f389178110062916637036545/v.f30.mp4?dockingId=a5f79f1c-ab18-4cf6-a1ee-6190bc6e4542&storageSource=3'
            ],
            uid:['馒头音乐君','摇滚怪人安'],
            playNum:['77 万',83836],
            plun:[224,554],

            autoplay: false,
          }
      },
      methods:{

          plays(item){
            document.getElementsByClassName('play')[item].style.display='none';
            this.autoplay=true;

            let myPlayer = this.$video(document.getElementsByTagName('video')[item], {
              //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
              controls: true,
              //自动播放属性,muted:静音播放
              autoplay:true,
              //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
              preload: "auto",
              //设置视频播放器的显示宽度（以像素为单位）

            });



          },
        show(){
            // if(!this.isShow){
            //   this.isShow=true;
            //
            // }
        }
      }
    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
.videos{
  padding: 30px 15px 145px 15px;
  box-sizing: border-box;
  .vv{
    .video-play{
      width: 100%;
      height: 680px;
      box-sizing: border-box;
      border-radius: 30px;
    }
    .play{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      img{
        width: 210px;
      }
    }
    .pp{
      position: relative;
    }
    .video-bottom{
      margin-top: 35px;
      margin-bottom: 35px;
      position: relative;
      padding: 0 15px;
      box-sizing: border-box;

      span{
        font-size: 38px;
        box-sizing: border-box;
        color: #323232;
        vertical-align: middle;
        display: inline-block;
      }
      .name{
        box-sizing: border-box;
        padding-left: 15px;
      }
      .s1{
        width: 70px;
        height: 45px;
        background-color: red;
        img{
          vertical-align: middle;
        }
      }
      .item{
        font-size: 25px;
        color: #ccc;
        img{
          width: 30px;
          vertical-align: middle;
        }
      }
      .s2{
        padding-left: 460px;
      }
      .s3{
        padding-left: 80px;

      }
      .s4{
        right: 0;
        top: 50%;
        transform: translate(0,-35%);
        position: absolute;
      }
    }
  }

}
</style>
